<template>
  <Box :title="title"  class="traffic-level-detail-wrapper" direction="row">
    <Panel second class="block video" align="center" title="G2_K1000+900_南京方向">
      <Switch :list="[]"></Switch>
    </Panel>

    <!-- 断面流量 -->
    <Panel second class="block" title="断面流量">
      <div class="count-same">
        <div class="count-box">
          <span class="count number">{{ flowState.total || 0 }}</span> <span class="company">辆</span>
        </div>
        <SequentialSame class="same" :data="flowState"> </SequentialSame>
      </div>
      <DashedLine :seriesData="flowState.seriesData" :xDate="flowState.xDate"></DashedLine>
    </Panel>

    <!-- 断面车速 -->
    <Panel second class="block" title="断面车速">
      <div class="count-same">
        <div class="count-box">
          <span class="count number">{{ speedState.total || 0 }}</span> <span class="company">km/h</span>
        </div>
        <SequentialSame class="same" :data="speedState"></SequentialSame>
      </div>
      <DashedLine renderType="拥挤程度" :xDate="speedState.xDate" :seriesData="speedState.seriesData"></DashedLine>
    </Panel>
  </Box>
</template>

<script>
/**
 * @desc 拥挤程度详情
 * @date 2022/10/22
 * @autheor  邓清波
 * **/
export default {
  name: 'TrafficLevelDetail'
}
</script>
<script setup>
import Switch from '../../components/detail/Switch.vue'
import DashedLine from '../../components/charts/DashedLine.vue'
import Box from '../../components/detail/Box.vue'
import Panel from '../../components/panel'
import SequentialSame from '../../components/sequential-same'
import trafficApi from '../../api/traffic'
import { reactive, shallowRef, watch, defineProps, getCurrentInstance, computed, nextTick } from 'vue'
import useMapOperates from '@/hooks/useMapOperates'
import { lineColors } from '../../config/traffic'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})
const handleDark = useMapOperates()
const title = shallowRef() // 详情面板标题
const { proxy } = getCurrentInstance()

// 断面流量
const flowState = reactive({
  seriesData: [
    {
      color: '#2b6ff4',
      data: []
    }
  ],
  xDate: [],
  total: 0,
  ring: 0,
  same: 0
})

// 断面车速
const speedState = reactive({
  seriesData: [
    {
      color: '#2b6ff4',
      data: []
    }
  ],
  xDate: [],
  total: 0,
  ring: 0,
  same: 0
})

watch(
  () => props.data,
  (newV, prevV) => {
    title.value = newV.describe
    getData()
    const path = (newV.heatModelList || []).map(i => [i.lon, i.lat])

    handleDark(
      'marker',
      [{ icon: 'zhdd-gl-sxj', path: path[0], name: '不知名摄像头', size: [30, 35], offset: [-15, -35] }],
      {
        type: 'sxj'
      }
    )

    const lines = [
      {
        name: 'test',
        path,
        config: {
          lineWidth: 8,
          lineColor: lineColors[newV.crowdDescribe],
          selectWidth: 10,
          selectColor: lineColors[newV.crowdDescribe]
        }
      }
    ]
    proxy.$mapSdk().setMapCenter(path)

    handleDark('polyline', lines)
  },
  { deep: true, immediate: true }
)

/**
 * 获取详情
 * **/
function getData() {
  const params = {}
  // 获取断面流量
  trafficApi.getSectionFlow(params).then(res => {
    const data = res.data
    flowState.seriesData[0].data = data.value || []
    flowState.xDate = data.dateList || []
    flowState.total = data.total
    flowState.ring = data.ringRatio
    flowState.same = data.withRatio
  })

  // 断面车速
  trafficApi.getSpeedFlow(params).then(res => {
    const data = res.data
    speedState.seriesData[0].data = data.value || []
    speedState.xDate = data.dateList || []
    speedState.total = data.total
    speedState.ring = data.ringRatio
    speedState.same = data.withRatio
  })
}
</script>

<style scoped lang="less">
.traffic-level-detail-wrapper {
  width: 100%;
  height: 100%;

  .block {
    flex: 1;
    height: 100%;

    .chart-title {
      font-size: 14px;
      color: #333333;
    }

    .count-same {
      display: flex;
      width: 100%;
      justify-content: space-between;

      .count-box {
        width: 130px;

        .count {
          line-height: 32px;
          font-size: 32px;
          text-align: left;
          color: #266bf4;
        }
      }

      .same {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        align-items: center;
        /deep/ .sequential {
          margin-right: 10px;
        }
      }
    }
  }
}

.video {
  flex: none !important;
  width: 30%;
}
</style>
